<template>
  <view class="contanier2">
    <view class="head">
      <view class="userMsg">
        <image :src="commentData.userAvatar" class="avatar" />
        <span class="name">{{ commentData.nickname }}</span>
        <image v-if="commentData.isBest" class="hot" src="/static/images/common/hot_tag.png" />
      </view>
      <span class="date">{{ commentData.evaluateTime | time }}</span>
    </view>
    <view class="content">
      <rich-text :nodes="_parseHtmlSync(commentData.content)"></rich-text>
      <!-- <view class="text" v-text="commentData.content"></view> -->
      <view v-if="commentData.imageList && commentData.imageList.length > 0" class="img_content">
        <image
          v-for="(it,idx) in commentData.imageList"
          :key="idx"
          mode="aspectFill"
          class="goodsimg"
          :src="it.imageUrl"
          :style="{width: commentData.imageList.length === 1 ? '350rpx' : '230rpx',height: commentData.imageList.length === 1 ? '350rpx' : '230rpx'}"
          @click="show(idx)" />
      </view>
      <view v-if="commentData.imageList && commentData.imageList.length > 3" class="count-block">{{ commentData.imageList.length }}张</view>

    </view>
  </view>
</template>

<script>
import { parseHtmlSync } from '@/components/jyf-Parser/libs/MpHtmlParser'
/**
 * 商品评论组建
 */
export default {
  name: 'CommentList',
  filters: {
    time(val) {
      return val.slice(0, -9)
    }
  },
  props: {
    commentData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      imgList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // 初始化大图预览数据集合
      if (this.commentData.imageList && this.commentData.imageList.length > 0) {
        this.commentData.imageList.forEach(it => {
          this.imgList.push(it.imageUrl)
        })
      }
    },
    _parseHtmlSync(item) {
      return parseHtmlSync(item)
    },
    show(index) {
      uni.previewImage({
        urls: this.imgList,
        loop: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
  display: none;
}
.contanier2 {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #fff;
  .content{
    padding-top: 20rpx;
    .count-block{
      position: absolute;
      background-color: rgba(0,0,0,0.6);
      border-radius: 14rpx;
      line-height: 28rpx;
      padding: 0 20rpx;
      color: white;
      font-size: 20rpx;
      right: 16rpx;
      bottom: 18rpx;
    }
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .date {
      color: #999;
    }
    .userMsg {
      display: flex;
      align-items: center;
      .avatar {
        width: 70rpx;
        height: 70rpx;
        flex-grow: 0;
        border-radius: 50%;
        margin-right: 22rpx;
      }
      .name {
        display: inline-block;
        // width: 51%;
        color: #010101;
        font-weight: 500;
        margin-right: 20rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 28rpx;
      }
      .hot {
        width: 62rpx;
        height: 30rpx;
      }
    }
  }
  .text {
    white-space: pre-line;
    margin-top: 24rpx;
  }
  .img_content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24rpx;
    img:nth-child(3n + 3) {
      margin-right: 0;
    }
    .goodsimg {
      margin: 0 20rpx 20rpx 0;
      object-fit: cover;
    }
  }
}
</style>
